<template>
    <main-page>
        <div style="width: 100%; padding: 5px">
            <el-row :gutter="5">
                <el-col v-for="item in list" :key="item.id" :lg="6" :md="8" :sm="12" :xl="6" :xs="24">
                    <el-card class="task task-item" shadow="hover">
                        <h2>{{ item.name }}</h2>
                        <el-form class="kt-task-form" :model="item" :label-width="80">
                            <el-form-item label="Bean名称">
                                <el-input :model-value="item.beanName" disabled/>
                            </el-form-item>
                            <el-form-item label="方法名称">
                                <el-input :model-value="item.methodName" disabled/>
                            </el-form-item>
                            <el-form-item label="参数">
                                <el-input :model-value="item.params || '无'" disabled/>
                            </el-form-item>
                            <el-form-item label="定时规则">
                                <el-input :model-value="item.cronExpression" disabled/>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <div class="bottom">
                                <div class="state">
                                    <transition mode="out-in">
                                        <el-tag v-if="item.status === '0'" type="danger">已暂停</el-tag>
                                        <el-tag v-else type="success">运行中</el-tag>
                                    </transition>
                                </div>
                                <div class="handler">
                                    <el-popconfirm :title="item.status === '0'? `确定恢复执行吗？`:`确定暂停执行吗？`" width="190" placement="left-end"
                                                   @confirm="() => item.status === '0'? onResume(item):onPause(item)">
                                        <template #reference>
                                            <el-button v-if="item.status === '0'" v-auth="'job:resume'" circle plain type="primary"/>
                                            <el-button v-else v-auth="'job:pause'" circle plain type="danger"/>
                                        </template>
                                    </el-popconfirm>
                                    <el-popconfirm title="确定立即执行一次吗？" width="190" placement="top-end" @confirm="onRun(item)">
                                        <template #reference>
                                            <el-button v-auth="'job:run'" circle plain type="success"/>
                                        </template>
                                    </el-popconfirm>
                                    <el-dropdown v-if="$auth(['job:update', 'job:delete', 'joblog:view'], 'or')" trigger="click" placement="top">
                                        <el-button circle icon="el-icon-more" plain type="info"></el-button>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item @click="onEdit(item)" v-if="$auth('job:update')">编辑</el-dropdown-item>
                                                <el-dropdown-item @click="onShowLogs(item)" v-if="$auth('joblog:view')">日志</el-dropdown-item>
                                                <el-dropdown-item @click="onDelete(item)" v-if="$auth('job:delete')">删除</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </div>
                        </template>
                    </el-card>
                </el-col>
                <el-col :lg="6" :md="8" :sm="12" :xl="6" :xs="24">
                    <el-card class="task task-add" shadow="never" @click="onEdit()">
                        <el-icon>
                            <svg-icon icon="icon-plus"/>
                        </el-icon>
                        <p>添加计划任务</p>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <edit ref="editRef"/>
        <logs ref="logsRef"/>
    </main-page>
</template>

<script lang="ts" setup>
import Edit from './edit.vue'
import Logs from './logs.vue'
import {onMounted, ref} from "vue";
import {service} from "@/utils";

const editRef = ref<InstanceType<typeof Edit>>();
const logsRef = ref<InstanceType<typeof Logs>>();

const save = ref(false);
const visible = ref(false);
const list = ref([]);

function onLoadTaskData() {
    service.get('/job').then(({code, data}) => {
        if (code === 200) {
            list.value = data.rows;
        } else {
            list.value = [];
        }
    })
}

function onEdit(task) {
    editRef.value?.open({
        data: task,
        confirm: (resolve: (value: any)=> void, form: any, operate: AxiosMethod) => {
            service[operate]('/job', form).then(({code}) => {
                if (code === 200) {
                    onLoadTaskData();
                }
                resolve(code);
            })
        }
    });
}

function onDelete(task) {
    service.confirm(`确定删除任务[${task.name}]吗?`, {
        url: '/job',
        data: {jobIds: task.jobId},
        success: onLoadTaskData
    })
}

function onShowLogs(task) {
    logsRef.value?.open(task)
}

// 暂停执行
function onPause (task) {
    service.get(`/job/pause/${task.jobId}`).then(({code}) => {
        if (code === 200) {
            task.status = '0'
        }
    })
}

// 恢复执行
function onResume (task) {
    service.get(`/job/resume/${task.jobId}`).then(({code}) => {
        if (code === 200) {
            task.status = '1'
        }
    })
}

// 立即执行一次
function onRun(task) {
    task.status = '1';
    service.get(`/job/run/${task.jobId}`).then(() => {
        task.status = '0';
    })
}

onMounted(() => onLoadTaskData())
</script>

<style scoped>
.kt-task-form .el-form-item--default{
    margin-bottom: 5px;
}

.kt-task-form .el-input.is-disabled :deep(.el-input__wrapper) {
    background-color: transparent;
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
}

.task {
    height: 275px;
}

.task-item h2 {
    font-size: 15px;
    padding-bottom: 15px;
}

.task-item li {
    list-style-type: none;
    margin-bottom: 10px;
}

.task-item li h4 {
    font-size: 12px;
    font-weight: normal;
    color: #999;
}

.task-item li p {
    margin-top: 5px;
}

.task-item .bottom {
    text-align: right;
    margin: -10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    color: #999;
}

.task-add:hover {
    color: #409eff;
}

.task-add i {
    font-size: 30px;
}

.task-add p {
    font-size: 12px;
    margin-top: 20px;
}

.dark .task-item .bottom {
    border-color: var(--el-border-color-light);
}
</style>
